/**
 * 常用主题颜色
 * 色值对照可查看uni.scss文件也可根据项目修改主题色值
 * 示例写法: <view class="color-main c-m"></view>
 */
@each $val,  $color in (
	color-main: $uni-color-primary,//主题颜色 #122e81
	c-m: $uni-color-primary,//主题颜色 #122e81
	c-p: $uni-color-main,//副主题色 #0075fc
	c-d: $uni-color-main,//副主题色 #0075fc
	){
	.#{$val} {
		color: $color
	}
}

/**
 * 常用字体颜色
 * 色值对照可查看uni.scss文件也可根据项目修改色值
 * 示例写法: <view class="text-main"></view>
 */
@each $val,  $color in (
	text-main:#333,
	t-m:#333,
	t-3:#333,
	t-4:#444444,
	text-white:#fff,
	t-w:#fff,
	t-f:#fff,
	text-black:#000,
	t-b:#000,
	t-0:#000,
	t-6:#666,
	t-9:#999,
	){
	.#{$val} {
		color: $color
	}
}

@for $num from 1 through 30 {
 	.p-#{$num} {
 		padding: #{$num}rpx;
 	}
}
/**
 * 常用边距、字体、圆角等样式的sass循环
 * 最小值1 最大100
 * 示例写法: <view class="ml-10 fs-20 radius-10 lh-10"></view>
 */
@for $num from 0 through 100 {
	// 左侧外边距
	.ml-#{$num} { margin-left: #{$num}rpx; }
	// 上方外边距
	.mt-#{$num} { margin-top: #{$num}rpx; }
	// 右侧外边距
	.mr-#{$num} { margin-right: #{$num}rpx; }
	// 下方外边距
	.mb-#{$num} { margin-bottom: #{$num}rpx; }
	
	// 左侧内边距
	.pl-#{$num} { padding-left: #{$num}rpx; }
	// 上方内边距
	.pt-#{$num} { padding-top: #{$num}rpx; }
	// 右侧内边距
	.pr-#{$num} { padding-right: #{$num}rpx; }
	// 下方内边距
	.pb-#{$num} { padding-bottom: #{$num}rpx; }
	// 行高
	.lh-#{$num} { line-height: #{$num}rpx; }
}
@for $num from 1 through 50 {
	// 圆角大小
	.br-#{$num} { border-radius: #{$num}rpx; }
	.radius-#{$num} { border-radius: #{$num}rpx; }
	// 字体大小
	.fs-#{$num} { font-size: #{$num}rpx; }
	.ft-#{$num} { font-size: #{$num}rpx; }
}

/**
 * 常用透明度设置
 * 最小值0 最大100 转为透明度区间为0-1
 * 示例写法: <view class="opacity-10"></view>
 */
@for $num from 0 through 100 {
	.opacity-#{$num} { 
		opacity: calc($num / 100); 
	}
}

/**
 * 常用文字超出影藏截断
 * 最小行数1 最大行数5 
 * 示例写法: <view class="c-text-over-1"></view>
 */
@for $i from 1 through 5 {
	.text-over-#{$i} {
		/* #ifdef APP-NVUE */
		// nvue下，可以直接使用lines属性，这是weex特有样式
		lines: $i;
		text-overflow: ellipsis;
		overflow: hidden;
		flex: 1;
		/* #endif */
		/* #ifndef APP-NVUE */
		// vue下，单行和多行显示省略号需要单独处理
		@if $i == '1' {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		} @else {
			display: -webkit-box!important;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: $i;
			-webkit-box-orient: vertical!important;
		}
		/* #endif */
	}
}

button::after {
	border: none;
}

page {
	background: $uni-bg-color;
	font-size: 28rpx;
	line-height: 1.5;
	box-sizing: border-box;
}

// 全部转为IE盒模型
view,
text,
scroll-view,
input,
button,
textarea,
image,
navigator,
form,
label,
checkbox,
radio,
picker,
slider,
map,
canvas,
progress,
audio,
video,
rich-text,
web-view {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

// 隐藏全局滚动条样式 
::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
	color: transparent;
}
.page {
	display: block;
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	color: #333;
}
// 宽高100%的元素比例
.full{
	width: 100vw;
	height: 100vh;
}
.big{
	display: block;
	width: 100%;
	height: 100%;
}
.h100{
	height: 100%;
}
.w100{
	width: 100%;
}
// 盒子超过的部分隐藏或滚动
.over-hide{ overflow: hidden; }
.over-auto-x{ overflow-x: auto; overflow-y: hidden;}
.over-auto-y{ overflow-y: auto; overflow-x: hidden; }
// start 文字加粗状态
.bold { font-weight: bold; }
.no-bold{ font-weight: normal; }
// end 文字加粗状态
// 强制不换行 常用于需要横向滚动时
.nowrap { white-space: nowrap; }
// 防止数字或者英文过长时不自动换行顶出显示范围问题
.break-all{ word-break: break-all; }
// flex布局盒子
.flex { display: flex; }
// 允许弹性布局换行
.flex-wrap {
	display: flex;
	flex-wrap: wrap;
}
// 弹性布局往两边对齐 中间间距会保持一致
.space-between {
	display: flex;
	justify-content: space-between;
}
// 弹性布局 开始(左)对齐
.flex-end {
	display: flex;
	justify-content: flex-start;
}
// 弹性布局 末尾(右)对齐
.flex-end {
	display: flex;
	justify-content: flex-end;
}
// 弹性布局 水平居中对齐
.justify-content {
	display: flex;
	justify-content: center;
}
// 弹性布局 垂直往上对齐
.align-start {
	display: flex;
	align-items: flex-start;
}
// 弹性布局 垂直居中对齐
.align-center {
	display: flex;
	align-items: center;
}
// 弹性布局 垂直往下对齐
.align-end {
	display: flex;
	align-items: flex-end;
}
// 绝对居中
.center {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
// 垂直排列
.column{
	display: flex;
	flex-direction: column;
}
.flex-auto{
	flex: 1;
}
// start 文字对齐方式
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
// end 文字对齐方式


.line-height1{
	line-height: 1;
}
// 下面的字体文件都是项目中部分文字的字体文件(不是完整的字体文件)，后续需要添加更多字体需要重新生成字体文件。
// 方正高端黑体
@font-face {
	font-family: 'ZKGaoDuanHei';
	src: url('./static/font/ZKGaoDuanHei.ttf');
}
// 方正工业黑体
@font-face {
	font-family: 'FZGongYeHei';
	src: url('./static/font/FZGongYeHei.ttf');
}
// 方正综艺黑体
@font-face {
	font-family: 'FZZongYi';
	src: url('./static/font/FZZongYi.ttf');
}

.ZKGaoDuanHei {
	font-family: 'ZKGaoDuanHei';
}

.FZGongYeHei {
	font-family: 'FZGongYeHei';
}

.FZZongYi {
	font-family: 'FZZongYi';
}

// 修改up-navbar组件全局的样式
:deep(.u-navbar__content__left) {
	padding: 0 !important;
}

:deep(.u-navbar__content__right) {
	padding: 0 !important;
}
:deep(.u-image__image) {
	display: block !important;
}
:deep(.u-image) {
	background-color: transparent !important;
}
:deep(.u-image view) {
	background-color: transparent !important;
}

